<template>
  <!--	<div class="la" ref="la">-->

  <div id="word-cloud" ref="wordCloud" class="word-cloud"></div>
  <!--	</div>-->
</template>
<script>
import { resizeChart } from "@/assets/js/echartOptions.js";
import "echarts-wordcloud";

export default {
  name: "wordCloud",
  data() {
    return {
      chart: null,
      options: null,
      width: 0,
      height: 0,
      arr: [
        {
          value: "5000",
          name: "华为",
        },
        {
          value: "90",
          name: "VIVO",
        },
        {
          value: "29",
          name: "OPPO",
        },
        {
          value: "28",
          name: "HONOR",
        },
        {
          value: "27",
          name: "红米",
        },
        {
          value: "26",
          name: "小米",
        },
        {
          value: "25",
          name: "美图",
        },
        {
          value: "24",
          name: "ONEPLUS",
        },
        {
          value: "23",
          name: "魅族",
        },
        {
          value: "22",
          name: "红手指",
        },
        {
          value: "21",
          name: "SAMSUNG",
        },
        {
          value: "20",
          name: "金立",
        },
        {
          value: "16",
          name: "BLACKBERRY",
        },
        {
          value: "15",
          name: "诺基亚",
        },
        {
          value: "14",
          name: "锤子",
        },
        {
          value: "13",
          name: "大疆",
        },
        {
          value: "12",
          name: "361",
        },
        {
          value: "11",
          name: "摩托罗拉",
        },
        {
          value: "10",
          name: "联想",
        },
        {
          value: "9",
          name: "玩家国度",
        },
      ],
      colors: [
        ["#35a3fc", "#35a3fc"],
        ["#1459d9", "#1459d9"],
        ["#fffd88", "#fffd88"],
        ["#108707", "#108707"],
        ["#29dbf8", "#29dbf8"],
        ["#fcbd32", "#fcbd32"],
        ["#fa5356", "#fa5356"],
        ["#ee76fc", "#ee76fc"],
        ["#89f480", "#89f480"],
        ["#f38053", "#f38053"],
        ["#25b5b0", "#25b5b0"],
      ],
    };
  },
  watch: {
    domWidth(value) {
      this.$refs.wordCloud.style.width = value;
    },
    domHeight(value) {
      this.$refs.wordCloud.style.height = value;
    },
    data: {
      handler(val) {
        this.$nextTick(() => {
          if (!this.chart) {
            this.chart = this.$echarts.init(this.$refs["wordCloud"]);
          }
          this.chart.setOption(this.setOptions(val), true, true);
          resizeChart(this.chart);
        });
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    domWidth: {
      type: String,
      default: '',
    },
    domHeight: {
      type: String,
      default: '',
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  created() {},
  methods: {
    setOptions(data) {
      return {
        tooltip: {
          show: true, // 是否显示提示信息
          position: "top",
          backgroundColor: "rgba(50,50,50,0.7)", //提示框浮层的背景颜色
          borderColor: "#fff", //提示框浮层的边框颜色
          textStyle: {
            color: "#fff",
            fontSize: "15",
          },
        },
        series: [
          {
            type: "wordCloud",
            // 形状 circle 圆，cardioid 心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: "circle",
            // 自定义图形
            // maskImage: maskImage,
            // 文字显示位置
            left: "center",
            top: "center",
            width: "85%",
            height: "85%",
            right: null,
            bottom: null,
            // 字体大小范围 px
            sizeRange: [14, 40],
            // 文字旋转角度范围 [-90,90]
            rotationRange: [0, 0],
            // 旋转步值
            rotationStep: 45,
            //网格的大小(以像素为单位)，用于标记画布的可用性
            //网格大小越大，单词之间的间距越大。
            gridSize: 16,
            // 是否渲染超出画布的文字, false-则文字若超出画布该项都不显示
            drawOutOfBound: true,
            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: false,
            // 文字样式
            textStyle: {
              fontFamily: "PingFangSC-Semibold",
              fontWeight: 600,
              color: function (params) {
                let colors = [
                  "#fe9a8bb3",
                  "#fe9a8bb3",
                  "#fe9a8b03",
                  "#9E87FFb3",
                  "#9E87FFb3",
                  "#9E87FFb3",
                  "#fe9a8bb3",
                  "#fe9a8bb3",
                  "#fe9a8bb3",
                  "#73DDFF",
                  "#58D5FF",
                ];
                return colors[parseInt(Math.random() * 10)];
              },
            },
            // 强调样式
            emphasis: {
              focus: "self",
              textStyle: {
                textShadowBlur: 6,
                textShadowColor: "#666",
              },
            },
            // 数据 格式 [{ name: '蛋饺', value: 200 },]
            data,
          },
        ],
      };
    },
    initeCharts() {
      if (!this.chart) {
        this.chart = this.$echarts.init(this.$refs["wordCloud"]);
      }

      this.chart.setOption(this.setOptions(this.arr), true, true);
    },
  },
  mounted() {
    this.initeCharts();
    resizeChart(this.chart);
    // this.width = this.$refs.wordCloud.style.width;
    // this.height = this.$refs.wordCloud.style.height;
  },
};
</script>
<style scoped>
.la {
  width: 100%;
  height: 100%;
}
.word-cloud {
  /*height: 240px;*/
  /*width: 560px;*/
}
</style>
